<template>
  <div class="w-full h-full overflow-auto bg-white-soft">
    <div class="mt-6">
      <div class="ui FHContainer">
        <div class="FHMain">
          <div class="FHContent has-aside flex flex-row">
            <div class="content">
              <!--面包屑-->
              <el-breadcrumb separator="/" class="mb-5">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>标签</el-breadcrumb-item>
              </el-breadcrumb>
              <el-row v-if="dataLoaded">
                <el-col :xs="8" :sm="4" :lg="4"  v-for="tag in articleTagCount">
                  <div class="p-2">
                    <RouterLink :to="`/article/tag/${tag.tagId}`">
                      <div class="bg-white rounded-lg border py-1 px-2 text-lg flex flex-row justify-between hover:text-white duration-300 hover:bg-sky-600 tag-link">
                        {{ tag.tagName }}
                        <span class="text-gray-400">{{ `(${tag.articleCount})`}}</span>
                      </div>
                    </RouterLink>
                  </div>
                </el-col>
              </el-row>
              <el-skeleton v-else/>
            </div>
            <div class="aside">
              <!--最近文章-->
              <RecentArticleList :articleList="recentArticle" class="mt-3"></RecentArticleList>
              <!--分类目录-->
              <ArticleCategory :article-category="articleCategory" :author-id="authorId"></ArticleCategory>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {countArticleCategory, countArticleTag, queryRecentArticle} from "@/api/article";
import {ElMessage} from "element-plus";
import ArticleCategory from "@/components/article/ArticleCategory.vue";
import RecentArticleList from "@/components/article/RecentArticleList.vue";
import {ArticleCategoryCountResp, ArticleRecentResp, ArticleTagCountResp} from "@/api/article/types";

const route = useRoute()
const router = useRouter()
const dataLoaded = ref(false)
const tagId = ref()
const tagName = ref('')
const authorId = ref<number>()
//标签和文章数量
const articleTagCount = ref<ArticleTagCountResp[]>([])
//最近文章
const recentArticle = ref<ArticleRecentResp[]>([])
//文章分类
const articleCategory = ref<ArticleCategoryCountResp[]>([])

//加载标签列表和文章数量
const loadArticleTagCount = () => {
  countArticleTag().then(result => {
    articleTagCount.value = result
    if (!dataLoaded.value) dataLoaded.value = true
  })
}

//加载最近文章
const loadRecentArticleList = () => {
  queryRecentArticle({authorId: authorId.value}).then(result => {
    recentArticle.value = result
  })
}
//加载分类列表
const loadArticleCategory = () => {
  countArticleCategory({authorId: authorId.value}).then(result => {
    articleCategory.value = result
  })
}

onMounted(() => {
  loadArticleTagCount()
  loadRecentArticleList()
  loadArticleCategory()
})
</script>

<style scoped>
.tag-link:hover span {
  color: white;
}
</style>